<template lang="">
  <a-layout>
    <div style="padding: 10px 24px">
      <span style="color: rgb(118, 115, 115)">咨询管理</span>/咨询管理
    </div>
    <a-layout-header style="margin: 0 24px; padding: 16px 0 0 50px">
      <a-form :model="searchForm" class="form-search" @submit="handleSubmit">
        <a-form-item label="名字:" field="name">
          <a-input-search
            v-model="searchForm.name"
            :style="{ width: '20vw' }"
            placeholder="请输入"
          />
        </a-form-item>
        <a-form-item label="分类:" style="margin-left: 5vw" field="category">
          <a-select :style="{ width: '20vw' }" placeholder="请选择" v-model="searchForm.category">
            <a-option v-for="item in categoriesData" :key="item.id" :value="item.id">{{
              item.name
            }}</a-option>
          </a-select>
        </a-form-item>
        <a-form-item style="margin-left: 20vw">
          <a-space>
            <a-button @click="getConsultList">重置</a-button>
            <a-button type="primary" html-type="submit">查询</a-button>
          </a-space>
        </a-form-item>
      </a-form>
    </a-layout-header>
    <a-modal
      width="800px"
      v-model:visible="this.visible"
      title="新建"
      @cancel="handleCancel"
      @ok="handleBeforeOk"
    >
      <a-form :model="addFrom" style="margin-left: -100px; width: 850px" :rules="rules">
        <a-form-item field="name" label="名字" validate-trigger="blur">
          <a-input :style="{ width: '350px' }" v-model="addFrom.name" />
        </a-form-item>
        <a-form-item label="分类:" field="articleCategoryId" validate-trigger="blur">
          <a-select
            :style="{ width: '750px' }"
            placeholder="请选择"
            v-model="addFrom.articleCategoryId"
          >
            <a-option v-for="item in categoriesData" :key="item.id" :value="item.id">{{
              item.name
            }}</a-option>
          </a-select>
        </a-form-item>
        <a-form-item field="desc" label="简介">
          <a-textarea
            :style="{ width: '350px' }"
            placeholder="请输入简介"
            allow-clear
            v-model="addFrom.desc"
          />
        </a-form-item>
        <a-form-item field="image" label="图片">
          <a-upload
            action="http://101.42.35.238:3006/common/upload"
            :fileList="file ? [file] : []"
            :show-file-list="false"
            @change="onChange"
            @success="onSuccess"
          >
            <template #upload-button>
              <div
                :class="`arco-upload-list-item${
                  file && file.status === 'error' ? ' arco-upload-list-item-error' : ''
                }`"
              >
                <div class="arco-upload-list-picture custom-upload-avatar" v-if="file && file.url">
                  <img :src="file.url" />
                  <div class="arco-upload-list-picture-mask">
                    <IconEdit />
                  </div>
                  <a-progress
                    v-if="file.status === 'uploading' && file.percent < 100"
                    :percent="file.percent"
                    type="circle"
                    size="mini"
                    :style="{
                      position: 'absolute',
                      left: '50%',
                      top: '50%',
                      transform: 'translateX(-50%) translateY(-50%)'
                    }"
                  />
                </div>
                <div class="arco-upload-picture-card" v-else>
                  <div class="arco-upload-picture-card-text">
                    <IconPlus />
                    <div style="margin-top: 10px; font-weight: 600">Upload</div>
                  </div>
                </div>
              </div>
            </template>
          </a-upload>
        </a-form-item>
        <a-form-item field="content" label="详情">
          <div style="border: 1px solid #ccc">
            <Toolbar
              style="border-bottom: 1px solid #ccc"
              :editor="editor"
              :defaultConfig="toolbarConfig"
              :mode="mode"
            />
            <Editor
              style="height: 500px; overflow-y: hidden"
              v-model="html"
              :defaultConfig="editorConfig"
              :mode="mode"
              @onCreated="onCreated"
            />
          </div>
        </a-form-item>
      </a-form>
    </a-modal>
    <a-layout style="padding: 0 24px">
      <a-layout-content
        style="margin-top: 16px; color: #000; padding: 10px 20px; justify-content: start"
      >
        <div
          style="
            width: 100%;
            height: 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
          "
        >
          <div style="fontsize: 20px">咨询</div>
          <div>
            <a-space size="large">
              <a-button type="primary" @click="openFormHandler">
                <template #icon>
                  <icon-plus />
                </template>
                新建
              </a-button>
              <icon-refresh :style="{ fontSize: '20px' }" @click="getConsultList" :spin="isSpin"/>
              <icon-settings :style="{ fontSize: '20px' }" />
            </a-space>
          </div>
        </div>
        <a-table :columns="columns" :data="tableData" :bordered="false" :pagination="pagination">
          <template #index="{ rowIndex }">
            <span>{{ rowIndex + 1 }}</span>
          </template>
          <template #image="{ record }">
            <a-image width="100px" :src="record.image" />
          </template>
          <template #action="{ record }">
            <a-space>
              <a-button type="primary" @click="editHandler( record,$event)">
                <template #icon>
                  <icon-edit  />
                </template>
              </a-button>
              <a-popconfirm
                content="确认删除?"
                okText="确认"
                cancelText="取消"
                type="warning"
                @ok="del(record.id)"
              >
                <a-button type="primary" status="danger">
                  <template #icon>
                    <icon-delete />
                  </template>
                </a-button>
              </a-popconfirm>
            </a-space>
          </template>
        </a-table>
      </a-layout-content>
      <a-layout-footer>Footer</a-layout-footer>
    </a-layout>
  </a-layout>
</template>
<script>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import '@wangeditor/editor/dist/css/style.css'
import {
  getConsultAPI,
  getConsultCategoriesAPI,
  AddConsultAPI,
  RemoveConsultAPI,
  EditConsultAPI
} from '@/api/consult'
import { imgs } from '@/tools/request'
export default {
  components: { Editor, Toolbar },
  data() {
    return {
      isSpin:false,
      pagination: { pageSize: 5 },
      columns: [
        {
          title: '序号',
          slotName: 'index',
          align: 'center'
        },
        {
          title: '名字',
          dataIndex: 'name',
          align: 'center'
        },
        {
          title: '主图',
          slotName: 'image',
          align: 'center'
        },
        {
          title: '浏览次数',
          dataIndex: 'views',
          align: 'center'
        },
        {
          title: '分类',
          dataIndex: 'category.name',
          align: 'center'
        },
        {
          title: '描述',
          dataIndex: 'desc'
        },
        {
          title: '操作',
          slotName: 'action',
          align: 'center'
        }
      ],
      tableData: [],
      categoriesData: [],
      searchForm: {
        category: '',
        name: ''
      },
      visible: false,
      addFrom: {
        articleCategoryId: '',
        name: '',
        desc: '',
        image: '',
        content: '',
        views: 0
      },
      file: {},
      editor: null,
      html: '<p> </p>',
      toolbarConfig: {},
      editorConfig: { placeholder: '请输入内容...' },
      mode: 'default',
      rules: {
        name: [
          {
            required: true,
            message: '请填入名称'
          }
        ],
        articleCategoryId: [
          {
            required: true,
            message: '至少选择一项'
          }
        ]
      },
      editId:""
    }
  },
  methods: {
    editHandler(record){
      this.visible=true
      for(let i in this.addFrom){
        this.addFrom[i]=record[i]
      }

      this.file={url:record.image}
      this.editId=record.id
    },
    del(id){
      console.log(id);
      RemoveConsultAPI(id).then(()=>{
        this.getConsultList()
      })
    },
    getConsultList() {
      this.isSpin=true
      getConsultAPI().then((res) => {
        this.searchForm.category = ''
        this.searchForm.name = ''
        this.tableData = res.data.list.map((item) => {
          return {
            ...item,
            image: imgs(item.image)
          }
        })
        console.log(this.tableData)
      })
      setTimeout(()=>{
        this.isSpin=false
      },1000)
    },
    getConsultCategoriesList() {
      getConsultCategoriesAPI().then((res) => {
        this.categoriesData = res.data.list.map((item) => {
          return { id: item.id, name: item.name }
        })
      })
    },
    handleSubmit() {
      getConsultAPI(this.searchForm).then((res) => {
        this.searchForm.category = ''
        this.searchForm.name = ''
        this.tableData = res.data.list.map((item) => {
          return {
            ...item,
            image: imgs(item.image)
          }
        })
      })
    },
    openFormHandler() {
      this.visible = true
    },
    onChange(_, currentFile) {
      this.file = {
        ...currentFile
      }
    },

    onSuccess(currentFile) {
      this.addFrom.image = currentFile.response.data
    },
    onCreated(editor) {
      this.editor = Object.seal(editor)
    },
    handleBeforeOk() {
      if(!this.editId){
        if (this.addFrom.name && this.addFrom.articleCategoryId) {
          const editor = this.editor
          this.addFrom.content = editor.children[0].children[0].text
          AddConsultAPI(this.addFrom).then((res) => {
            this.visible = false
            this.getConsultList()
          })
        }
      }else{
        console.log(this.addFrom);
        EditConsultAPI(this.editId,this.addFrom).then((res)=>{
          console.log(res);
          this.visible=false
          this.getConsultList()
        })
      }
      
    },
    handleCancel() {
      this.visible = false
      for (var i in this.addFrom) {
      this.addFrom[i] = ''
    }
    this.file={}
    this.getConsultList()
    }
  },
  updated() {
    for (var i in this.addFrom) {
      this.addFrom[i] = ''
    }
  },
  mounted() {
    this.getConsultList()
    this.getConsultCategoriesList()
    setTimeout(() => {
      this.html = ''
    }, 1500)
  },
  beforeUnmount() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  }
}
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>
<style lang="css" scoped>
.form-search {
  flex-direction: row;
}
</style>
